<template>
    <div id="main" :style="{width: '100%', height: '100%'}" />
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    Day: {
        type: Array,
        default: null
    },
    DayFail: {
        type: Array,
        default: null
    },
    DaySuccess: {
        type: Array,
        default: null
    },
  },
  data() {
    return {
      chartDom: null,
      myChart: null,
      option: null,
    };
  },
  watch: {
    Day: {
      handler (newName, oldName) {
        this.myChart.dispose();
        this.chartDom = document.getElementById("main");
        this.myChart = echarts.init(this.chartDom);
        this.initChart();
      }
    }
  },
  beforeDestroy() {
    if (!this.myChart) {
      return
    }
    this.myChart.dispose()
    this.myChart = null;
    this.chartDom=null;
    this.option=null;
  },
  mounted() {
    this.$nextTick(() => {
      this.chartDom = document.getElementById("main");
      this.myChart = echarts.init(this.chartDom);
      this.initChart();
    });
  },

  methods: {
    initChart() {
      // console.log(document.getElementById("main"), "----d");
      // return;
      // this.chart = echarts.init(this.$el, "macarons");

      this.option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
                data: ['成功', '失败']
            },
        xAxis: {
                data: this.Day,
                // boundaryGap: false,
                // axisTick: {
                //     show: false
                // }
            },
        yAxis: {
          name:'调用次数',
        },
        grid: {
                left: 50,
                right: 30,
                bottom: 40,
                top: 60,
                // containLabel: true
            },
        series: [
          {
            name: '成功',
            itemStyle: {
              color: 'rgb(64,213,106)',
            },
            data: this.DaySuccess,
            type: 'bar',
            stack: 'x'
          },
          {
            name: '失败',
            itemStyle: {
              color: 'rgb(246,93,93)',
            },
            data: this.DayFail,
            type: 'bar',
            stack: 'x'
          }
      ]
      };
      this.option && this.myChart.setOption(this.option);
    },
    //
  },
};
</script>
